【Flutter入門講座 第3回】ウィジェットで画面を作る。Scaffold・Column/Row・ListViewとMaterial 3のテーマ

第 2 回では Dart の基本を押さえました。第 3 回は、いよいよ画面を作ります。

Flutter では、文字もボタンも余白もレイアウトも、すべて「ウィジェット（Widget）」です。ウィジェットを入れ子にして組み合わせ、画面を作ります。HTML の要素や、React のコンポーネントを組み合わせるのと同じ考え方です。

この回の終わりには、メモアプリの一覧画面ができあがります。

ウィジェットは「設計図」

Flutter のウィジェットは、画面に何をどう表示するかを書いた設計図です。データが変わると、Flutter が新しい設計図（ウィジェット）を作り直し、変わった部分だけを効率よく描き直します。

ウィジェットには大きく 2 種類あります。

画面の骨組み: MaterialApp と Scaffold

アプリの一番外側には MaterialApp を置きます。テーマ（色や文字の大きさ）や、最初に表示する画面（home）を設定します。

import 'package:flutter/material.dart';

void main() {
  runApp(const MemoApp());
}

class MemoApp extends StatelessWidget {
  const MemoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'メモ',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
      ),
      home: const StaticMemoListPage(),
    );
  }
}

• build メソッドが返したウィジェットが、画面に表示されます
• ColorScheme.fromSeed は、1 色（seedColor）から Material 3 の配色一式を自動で作る指定です。ボタンや背景の色が、指定した色に合わせてそろいます

一覧画面を作る

Scaffold は、上部のバー（AppBar）・本文（body）・右下の丸いボタン（FloatingActionButton）など、よくある画面の骨組みを用意してくれるウィジェットです。

class StaticMemoListPage extends StatelessWidget {
  const StaticMemoListPage({super.key});

  static const memos = ['牛乳を買う', '見積書を送る', 'Flutter 講座の第 4 回を読む'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('メモ')),
      body: ListView.separated(
        itemCount: memos.length,
        separatorBuilder: (context, index) => const Divider(height: 1),
        itemBuilder: (context, index) => ListTile(
          leading: const Icon(Icons.note_outlined),
          title: Text(memos[index]),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

ListView は「画面に入る分だけ」作る

ListView.separated（や ListView.builder）は、itemBuilder で 1 行ずつ作る一覧です。画面に表示される行だけを作るので、1,000 件のデータでも軽く動きます。separatorBuilder は行と行の間の区切り線です。

ListTile は、アイコン・タイトル・サブタイトルなどを持つ一覧の 1 行の定番の部品です。

const を付ける理由

const Text('メモ') のように、中身が変わらないウィジェットには const を付けます。Flutter が同じものを使い回せるので、描き直しの無駄が減ります。VS Code で const を付けられる場所には、付けるよう提案が出ます。

レイアウトの基本: Column・Row・Padding・Expanded

Web の CSS の flexbox に近い考え方で、ウィジェットを縦や横に並べます。

Padding(
  padding: const EdgeInsets.all(16),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text('今日のメモ', style: Theme.of(context).textTheme.titleLarge),
      const SizedBox(height: 8),
      Row(
        children: [
          const Icon(Icons.check_box_outline_blank),
          const SizedBox(width: 8),
          const Expanded(child: Text('牛乳を買う')),
          TextButton(onPressed: () {}, child: const Text('削除')),
        ],
      ),
    ],
  ),
)

Row の中で長い文字がはみ出すときは、Expanded で包むと、残りの幅に収まって折り返されます。「はみ出し（overflow）」の黄色と黒の縞模様が出たら、まず Expanded を疑いましょう。

文字の大きさはテーマから

Theme.of(context).textTheme.titleLarge のように、文字の大きさや太さはテーマから取り出して使います。アプリ全体で見た目がそろい、あとから一括で変えられます。

まとめ

• Flutter の画面は、すべてウィジェットの組み合わせです。build メソッドが返したものが表示されます
• MaterialApp でテーマを決め、Scaffold で画面の骨組み（AppBar・本文・ボタン）を作ります
• 一覧は `ListView.separated` と `ListTile`。画面に入る分だけ作るので、件数が多くても軽く動きます
• レイアウトは Column・Row・Padding・SizedBox・Expanded の組み合わせ。CSS の flexbox と同じ考え方です
• 色は ColorScheme.fromSeed で 1 色から Material 3 の配色を作り、文字はテーマから取り出して使います

この回の一覧は、決まった 3 件を表示するだけです。次回（第 4 回）は、メモを追加したりチェックを付けたりできるように、状態（State）を扱います。

Flutter 入門講座（全 6 回）

1. Flutter とは？できることと開発環境の作り方
2. Dart の基本文法
3. ウィジェットで画面を作る（この記事・11月11日）
4. 状態管理の第一歩（11月12日公開予定）
5. API からデータを取得し、端末に保存する（11月13日公開予定）
6. 画面遷移・テスト・リリースまで（11月14日公開予定）

※ Flutter・Material Design は Google LLC の商標です。

参考

• Flutter 公式ドキュメント「Building layouts」
• Flutter 公式ドキュメント「Material Design for Flutter」